{% extends 'basic_app/master.html' %}
{% block tag_left %}
    {% include 'oratk_app/tag_left_user.html' %}
{% endblock %}
{% block title %}
    <title>ORATK</title>
{% endblock %}
{% block userinfo %}
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        <h3 class="page-header">Archery 工单查询</h3>
        <form name="Form" role="search">
            <div class="navbar-form navbar-left">
                <div>
                    <label>Archery 地址： <a href="http://12.18.0.18:9123/sqlworkflow/" target="_blank">http://12.18.0.18:9123/sqlworkflow/</a></label>

                </div>
                <span>&nbsp</span>
                <div>
                    <label>工单内容关键字&nbsp&nbsp&nbsp&nbsp(or)：</label>
                    &nbsp&nbsp<input type="text" style="width:300px;" class="form-control" id="key_info_or"
                                     placeholder="多个关键字以空格分开(不区分大小写)">
                </div>
                &nbsp
                <div>
                    <label>工单内容关键字&nbsp(and)：</label>
                    &nbsp&nbsp<input type="text" style="width:300px;" class="form-control" id="key_info_and"
                                     placeholder="多个关键字以空格分开(不区分大小写)">
                </div>


                <div><span>&nbsp</span></div>
                <div class="col-sm-10">
                    {#                <div class="form-group">#}
                    <div style="text-align:center;vertical-align:middle;">
                        <button type="button" class="btn btn-primary" data-loading-text="Loading..." style="text-align:center;" class="btn" id="btSelect" >查询</button>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        <div id="tab_detail"></div>
    </div>

{% endblock %}

{% block script %}
    <script>
        //当点击"查询(本页展示)时，输入框值检查及ajax异步调用"
        $('#btSelect').click(function () {
            var key_info_or = $('#key_info_or').val();
            var key_info_and = $('#key_info_and').val();
            if (key_info_or == '' && key_info_and == '' ) {
                alert('请输入要查询的关键字')
                return;
            }
            $.ajax({
                type: "POST",
                data: {
                    'key_info_or': $('#key_info_or').val(),
                    'key_info_and': $('#key_info_and').val()
                },
                url: "/oratk_app/oratk_most_archery_select_ajax", //后台处理函数的url
                cache: false,
                dataType: "html",
                beforeSend: function () {
                    // $('#loadingModal').modal({backdrop: 'static', keyboard: false});
                    showLoading();
                   $('#btSelect').button('loading')

                },
                complete: function () {
                    //$('#loadingModal').modal('hide');
                    hideLoading()
                    $('#btSelect').button('reset')
                },
                success: function (result) {
                    if (result == '空'){
                        alert('无符合条件的工单信息');
                        return ;
                    }

                    $("#tab_detail").html(result);
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(XMLHttpRequest.responseText);
                },
            })
            //调用模态框
            $('#myModal').modal('show')
        })


    </script>



{% endblock %}